<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>0411-04 animation动画</title>
    <style>
        .box{
            width:500px;
            height:250px;
            border: 1px solid #000;
            margin:100px auto;
            padding:2px;
            /*overflow: hidden;*/
        }
        .ul{
            width:4500px;
            /*animation: gun1 10s linear infinite;*/
        }
        .box div div{
            width: 500px;
            height:250px;
            float: left;
            animation:gun2 12s linear infinite;
        }
        .box:hover div{
            animation-play-state: paused;
        }
        .box1{background-color:blue}
        .box2{background-color:yellow}
        .box3{background-color:red}
        .box4{background-color:green}
        .box5{background-color:black}
        .box6{background-color:purple}
        .box7{background-color:#07beea}
        .box8{background-color:red}
        @keyframes gun1 {
            0%{
                transform: translate(0);
            }
            100%{
                transform: translate(-100%);
            }
        }
        @keyframes gun2 {
            0%{
                transform: translate(0%);
            }
            100%{
                transform: translate(-800%);
            }
        }
    </style>
</head>
<body>
<div class="box">
    <div class="ul">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box5"></div>
        <div class="box6"></div>
        <div class="box7"></div>
        <div class="box8"></div>
        <div class="box1"></div>
    </div>

</div>

</body>
</html>